<template>
  <div class="login">
    <div class="r_flex_center">
      <div class="login_left">
        <img src="../assets/images/logo_back.png" class="logo_back">
        <img :src="$store.state.settings.wangzhan.logo" class="sidebar-logo">
        <p class="logo_p1" @click="changeLogin">欢迎使用{{ $store.state.settings.wangzhan.systemName }}</p>
        <p class="logo_p2">优享 / 精准 / 安全</p>
      </div>
      <div class="login_right">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
          <h3 class="title">登入系统</h3>
          <!-- 账号密码登录 -->
          <el-form-item v-show="phoneCode==1 || phoneCode==3" prop="username">
            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
              <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <el-form-item v-show="phoneCode==1 || phoneCode==3" prop="password">
            <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <!-- 验证码登录 @input="changeLogin" -->
          <el-form-item v-show="phoneCode==2 || phoneCode==3" prop="phone">
            <el-input v-model="loginForm.phone" type="text" auto-complete="off" placeholder="请输入手机号">
              <svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon icon_phone" />
            </el-input>
          </el-form-item>
          <el-form-item v-show="phoneCode==2 || phoneCode==3" prop="smsCode">
            <el-input v-model="loginForm.smsCode" type="text" class="yanzhenma" placeholder="请输入验证码">
              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon password_icon" />
              <template slot="append">
                <div class="code_border" @click="getphoneCode(Boolean(phoneNum))">
                  <p class="">{{ `${!phoneNum?'发送验证码':phoneNum+'秒内有效'}` }}</p>
                </div>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item v-show="captchaOnOff" prop="code">
            <el-input v-model="loginForm.code" type="text" class="yanzhenma codeUrl_temp" placeholder="请输入验证码" @keyup.enter.native="handleLogin">
              <svg-icon slot="prefix" icon-class="iconDun" class="el-input__icon input-icon iconDun" />
              <template slot="append">
                <div class="codeUrl_border">
                  <img :src="codeUrl" class="login-code-img" @click="getCode">
                </div>
              </template>
            </el-input>

            <!-- <el-input v-model="loginForm.code" class="" placeholder="请输入验证码" @keyup.enter.native="handleLogin" >
              <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
            </el-input> -->

            <!-- <template slot="append">
                <div class="code_border" @click="getphoneCode(Boolean(phoneNum))">
                  <p class="">{{ `${!phoneNum?'发送验证码':phoneNum+'秒内有效'}` }}</p>
                </div>
              </template> -->

          </el-form-item>

          <!-- 验证码登录-新 -->
          <!-- <div class="input_border r_flex" >
            <div class="icon_border r_flex_center">
              <img src="../assets/icons/imges/icon_logo03.png" alt="">
            </div>
            <input type="text" v-model="loginForm.phone" placeholder="请输入手机号">
          </div>
          <div class="input_border r_flex" >
            <div class="icon_border r_flex_center">
              <img src="../assets/icons/imges/icon_logo02.png" alt="">
            </div>
            <input type="password" v-model="loginForm.smsCode" placeholder="请输入验证码">
            <div class="login_num" @click="getphoneCode(Boolean(phoneNum))">
              <p class="">{{ `${!phoneNum?'发送验证码':phoneNum+'秒内有效'}` }}</p>
            </div>
          </div>
          <div class="input_border r_flex" >
            <div class="icon_border r_flex_center">
              <img src="../assets/icons/imges/icon_logo01.png" alt="">
            </div>
            <input type="text" v-model="loginForm.code" placeholder="请输入验证码">
            <div class="login_code">
              <img :src="codeUrl" class="login-code-img" @click="getCode">
            </div>
          </div> -->

          <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox> -->
          <el-form-item style="width: 100%" class="bottom_logo">
            <el-button class="login_bottom" :loading="loading" size="medium" type="primary" style="width: 100%" @click.native.prevent="handleLogin">
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
            <!-- <div style="margin-top: 10px;">
              <el-button size="medium" type="success" style="width: 100%" @click="phoneCode=!phoneCode;">
                <span> {{ phoneCode? '密码登录':'手机验证码登录' }}</span>
              </el-button>
            </div> -->
            <!-- <div v-if="register" style="float: right">
              <router-link class="link-type" :to="'/register'">立即注册</router-link>
            </div> -->
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!--  底部  -->
    <div class="el-login-footer">
      <!-- <span>Copyright © 2018-2022 RuoYi-Vue-Plus All Rights Reserved.</span> -->
    </div>
  </div>
</template>

<script>
import { getCodeImg, sendSysCode } from '@/api/login'
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
  name: 'Login',
  data() {
    return {
      codeUrl: '',
      loginForm: {
        username: '',
        password: '',
        rememberMe: false,
        code: '',
        uuid: '',
        type: 1,
        // 验证码登录
        phone: '', // 手机号
        smsCode: '' // 验证码
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
        password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
        code: [{ required: true, trigger: 'change', message: '请输入图形验证码' }],
        phone: [{ required: true, trigger: 'change', message: '请输入手机号码' }],
        smsCode: [{ required: true, trigger: 'change', message: '请输入手机验证码' }]
      },
      loading: false,
      // 验证码开关
      captchaOnOff: true,
      // 注册开关
      register: false,
      redirect: undefined,
      // 手机验证码登录
      phoneCode: 1,
      // 验证码计时
      phoneNum: 0,
      // 计时器key
      timeoutKey: 1

    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    // 登录方式 1账号密码，2短信验证码，3都要
    this.phoneCode = window.CONG.VUE_LOGIN_TYPE
    this.loginForm.type = window.CONG.VUE_LOGIN_TYPE
    // 验证码
    this.getCode()
    // cookie
    // this.getCookie()
  },
  mounted() {
    console.log(window.screen.availWidth, 'window.screen.availHeight')
  },
  // 离开时清除计时器
  destroyed() {
    clearInterval(this.timeoutKey)
  },
  methods: {
    getphoneCode(data) {
      this.$set(this.loginRules, 'username', [{ required: false, trigger: 'change', message: '请输入您的账号' }])
      this.$set(this.loginRules, 'password', [{ required: false, trigger: 'change', message: '请输入您的密码' }])
      this.$set(this.loginRules, 'code', [{ required: false, trigger: 'change', message: '请输入图形验证码' }])
      // this.$set(this.loginRules, 'phone', [{ required: true, trigger: 'change', message: '请输入手机号码' }])
      this.$set(this.loginRules, 'smsCode', [{ required: false, trigger: 'change', message: '请输入手机验证码' }])

      this.$refs.loginForm.validate(valid => {
        if (valid && this.phoneNum == 0) {
          sendSysCode({ phone: this.loginForm.phone }).then(err => {
            console.log(err)
            if (err.code == 200) {
              this.loginForm.phoncode = ''
              this.phoneNum = 60
              this.timeoutKey = setInterval(() => {
                this.phoneNum--
                if (this.phoneNum < 1) {
                  this.phoneNum = 0
                  clearInterval(this.timeoutKey)
                }
              }, 1000)
            }
          })
        }
      })
    },
    changeLogin(data) {
      if (this.loginForm.phone == '######') {
        this.phoneCode = false
      }
    },
    getCode() {
      getCodeImg().then(res => {
        this.captchaOnOff = res.data.captchaOnOff === undefined ? true : res.data.captchaOnOff
        if (this.captchaOnOff) {
          this.codeUrl = 'data:image/gif;base64,' + res.data.img
          this.loginForm.uuid = res.data.uuid
        }
      })
    },
    getCookie() {
      const username = Cookies.get('username')
      const password = Cookies.get('password')
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      }
    },
    handleLogin() {
      // if (this.phoneCode) {
      //   this.$set(this.loginRules, 'username', [{ required: false, trigger: 'change', message: '请输入您的账号' }])
      //   this.$set(this.loginRules, 'password', [{ required: false, trigger: 'change', message: '请输入您的密码' }])
      //   this.$set(this.loginRules, 'code', [{ required: true, trigger: 'change', message: '请输入图形验证码' }])
      //   this.$set(this.loginRules, 'phone', [{ required: true, trigger: 'change', message: '请输入手机号码' }])
      //   this.$set(this.loginRules, 'smsCode', [{ required: true, trigger: 'change', message: '请输入手机验证码' }])
      // } else {
      //   this.$set(this.loginRules, 'username', [{ required: true, trigger: 'change', message: '请输入您的账号' }])
      //   this.$set(this.loginRules, 'password', [{ required: true, trigger: 'change', message: '请输入您的密码' }])
      //   this.$set(this.loginRules, 'code', [{ required: true, trigger: 'change', message: '请输入图形验证码' }])
      //   this.$set(this.loginRules, 'phone', [{ required: false, trigger: 'change', message: '请输入手机号码' }])
      //   this.$set(this.loginRules, 'smsCode', [{ required: false, trigger: 'change', message: '请输入手机验证码' }])
      // }
      // this.$refs.loginForm.validate(valid => {
      //   if (valid) {
      this.loginForm.phoneCode = this.phoneCode || ''
      this.loading = true
      if (this.loginForm.rememberMe) {
        Cookies.set('username', this.loginForm.username, { expires: 30 })
        Cookies.set('password', encrypt(this.loginForm.password), { expires: 30 })
        Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })
      } else {
        Cookies.remove('username')
        Cookies.remove('password')
        Cookies.remove('rememberMe')
      }
      this.$store
        .dispatch('Login', this.loginForm)
        .then(() => {
          this.$router.push({ path: this.redirect || '/' }).catch(() => {})
        })
        .catch((err) => {
          console.log(err, 'err')
          this.loading = false
          if (this.captchaOnOff) {
            this.getCode()
          }
        })
      //   }
      // })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: linear-gradient(180deg, #655BE8 0%, #B197FC 100%);
  background-size: cover;
  .login_left{
    position: relative;
    min-width: 524.9985px;
    height: 442px;
    padding: 100.0025px 0 0 58px;
    margin-right: 3rem;
    .sidebar-logo{
      height: 41.002px;
    }
    .logo_back{
      position: absolute;
      width: 524.9985px;
      left: 0;
      top: 0;
    }
    .logo_p1{
      position: relative;
      z-index: 2;
      margin: 39px 0rem;
      font-size: 46.501px;
      font-weight: bold;
      color: #FFFFFF;
    }
    .logo_p2{
      position: relative;
      z-index: 2;
      font-size: 29.9px;
      color: #FFFFFF;
      font-weight: 400;
    }
  }
  .el-form-item{
    margin-bottom: 0px;
    input {
      border: 1px solid #c6c5d9 !important;
      border-radius: 5.9995px;
      overflow: hidden;
    }
    :focus {
      border-style: solid;
      border-color: #655BE8;
      box-shadow: 0px 0px 4px #655BE8;
    }
  }
  .el-form-item--medium{
    margin-bottom: 22px;
  }
  .codeUrl_temp{
    .el-input-group__append{
      padding: 0;
      width: 90px;
      text-align: center;
      background: #a7f98f;
    }
  }
  .yanzhenma{
    position: relative;
    input {
      border-radius: 0;
      border-top-left-radius: 0.0923rem;
      border-bottom-left-radius: 0.0923rem;
    }
  }
}
.title {
  height: 26px;
  font-size: 26px;
  line-height: 26px;
  text-align: center;
  margin-bottom: 31.9995px;
  font-weight: 400;
  color: #918EF9;
}

.login-form {
  width: 336.999px;
  background: #FFFFFF;
  box-shadow: 0px 2.002px 34.0015px 3.003px rgba(106,95,233,0.3500);
  border-radius: 9.0025px;
  padding: 52px 41.002px 60.0015px;
  .icon_phone{
    width: 16px !important;
  }
  .password_icon{
    width: 16px !important;
  }
  .iconDun{
    width: 12px !important;
    margin-left: 4px !important;
  }
  .el-input {
    height: 38px;
    input {
      height: 38px;
      border: 1px solid #d6d3ff;
    }
    input::-webkit-input-placeholder { /* WebKit browsers */
    color:#C2C1D9;
    }

    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#C2C1D9;
    }

    input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#C2C1D9;
    }

    input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:#C2C1D9;
    }

  }
  .input-icon {
    height: 39px !important;
    width: 14px !important;
    margin-left: 2px;
  }
  .bottom_logo{
    margin-bottom: 0px;
  }
  .input_border{
    width: 256px;
    height: 34px;
    border: 1px solid #EBEAFD;
    border-radius: 6px;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 34px;
    margin-bottom: 17px;
    .icon_border{
      width: 60px;
      border-right: 1px solid #EBEAFD;
      flex-shrink: 0;
      img{
        display: block;
        width: 20px;
        height: auto;
      }
    }
    input{
      width: 100%;
      display: block;
      height: 34px;
      line-height: 34px;
      border: none;
      font-size: 13px;
      padding-left: 13px;
    }
    .login_num{
      padding: 0 4px;
      border-left: 1px solid #EBEAFD;
    }
    .login_num, .login_code{
      flex-shrink: 0;
    }
  }
  .el-input__icon{
    color: #918EF9;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.el-input-group__append{
  padding: 0;
  width: 90px;
  text-align: center;
}
.codeUrl_border{
  width: 89px;
  height: 36px;
  cursor: pointer;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
.login-code-img {
  display: block;
  width: 90px;
  height: 39px;
}
.login_bottom{
  height: 44.9995px;
  background: #918EF9;
  border-radius: 9.0025px;
  font-size: 19.5px;
  border: none;
  margin: 10px auto 0px;
  height: 36.4px;
  line-height: 36.4px;
  background: #918EF9;
  border-radius: 6.5px;
  font-size: 14px;
  padding: 0;
  &:hover{
    background: #7e7aff;
  }
}
.code_border{
  cursor: pointer;
  color: #333;
  line-height: 36px;
  height: 36px;
  p{
    color: #918ef9;
    background: #f1f0ff;
  }
}
</style>
